<template>
  <div>
    <div class="dis-flex search-bar">
      <div class="activePageName"> 区域销量分析  </div>
      <div class="flex-full">
        <el-radio-group v-model="formData.categoryName">
          <el-radio
            v-for="item in categoryList"
            :key="item.dictName"
            :label="item.dictName"
          >{{ item.dictName }}</el-radio>
        </el-radio-group>

        <el-date-picker
          v-model="months"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="changeMonth"
        />
      </div>
      <div class="btns">
        <!-- <el-button size="mini" type="primary" @click="handleExport">导出数据</el-button> -->
      </div>
    </div>
    <table class="pure-table pure-table-horizontal">
      <tr style="background-color:#f0f0f0">
        <th v-for="(item,index) in propList" :key="index">{{ item }}</th>
      </tr>
      <tr
        v-for="(item,index) in tableList"
        :key="index"
        class="highlight"
      >
        <td v-for="(i,key) in item" :key="key" :style="{fontWeight:key===0?'bold':''}">
          <span>  {{ i }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { getAreaSalesReport } from '@/api/display/recommendReport'
import SearchMixin from './mixins/Search'
export default {
  name: 'AreaSale',
  mixins: [SearchMixin],
  data() {
    return {
      propList: [],
      tableData: [],
      tableList: []
    }
  },
  watch: {
    formData: {
      handler(v) {
        this.initTableData()
      },
      deep: true,
      immediate: true
    }
  },
  created() {

  },
  methods: {
    initTableData() {
      const { categoryName, month } = this.formData
      if (!categoryName || !month) return
      getAreaSalesReport(this.formData).then(res => {
        this.tableData = res.data
        this.initData()
      })
    },
    initData() {
      const keyList = Object.keys(this.tableData).filter(v => v !== '办事处')
      const datas = []
      for (let i = 0; i < keyList.length; i++) {
        datas.push([keyList[i], ...this.tableData[keyList[i]]])
      }
      this.tableList = datas
      this.propList = ['', ...this.tableData['办事处']]
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
  display: flex;
  justify-content: center;
  padding:0 0 20px 50px;
  max-width:1100px ;
}
td,th {
    padding: 0;
}
.pure-table {
    margin-top: 20px;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-horizontal td,.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-horizontal tbody>tr:last-child>td {
    border-bottom-width: 0;
}
/deep/.highlight:hover{
    background-color:#F5F7FA;
}
</style>
